import React, { FC, useEffect } from 'react'
import { Typography, Space, Button, Checkbox, Form, Input, message } from 'antd'
import { Link, useNavigate } from 'react-router-dom'
import { useRequest } from 'ahooks'
import { UserAddOutlined } from '@ant-design/icons'
import { REGISTER_PATHNAME, HOME_PATHNAME, MANAGE_INDEX_PATHNAME } from '../../router/index'
import { loginServices } from '../../services/user'
import { setToken } from '../../utils/user-token'
import styles from './Login.module.scss'
const { Title } = Typography

type FieldType = {
    username?: string
    password?: string
    remember?: string
}
const USERNAME_KEY = 'USERNAME'
const PASSWORD_KEY = 'PASSWORD'
// 记住：将信息存储到localStorage中
function rememberUser(username: string, password: string) {
    localStorage.setItem(USERNAME_KEY, username)
    localStorage.setItem(PASSWORD_KEY, password)
}
// 忘记：从localStorage中删除用户信息
function deleteUserFromStorage() {
    localStorage.removeItem(USERNAME_KEY)
    localStorage.removeItem(PASSWORD_KEY)
}
// 取出：将用户信息存储到localStorage中【记住我为true】
function getUserInfoFromStorage() {
    return {
        username: localStorage.getItem(USERNAME_KEY),
        password: localStorage.getItem(PASSWORD_KEY),
    }
}
const Login: FC = () => {
    const nav = useNavigate()
    const [form] = Form.useForm() // Form组件提供的第三方hook

    useEffect(() => {
        const { username, password } = getUserInfoFromStorage()
        form.setFieldsValue({ username, password })
    }, [])

    const { run } = useRequest(
        async (username: string, password: string) => {
            // const { username, password } = values
            const data = await loginServices(username, password)
            return data
        },
        {
            manual: true,
            onSuccess(result) {
                nav(MANAGE_INDEX_PATHNAME)
                const { token = '' } = result
                setToken(token)
                console.log()
            },
        }
    )

    // 点击登录
    const onFinishHandler = (values: any) => {
        const { remember, username, password } = values
        run(username, password)
        if (remember) {
            rememberUser(username, password)
        } else {
            deleteUserFromStorage()
        }
    }
    return (
        <div className={styles.container}>
            <div>
                <Space>
                    <Title level={2}>
                        <UserAddOutlined />
                    </Title>
                    <Title level={2}>用户登录</Title>
                </Space>
            </div>
            <div>
                <Form
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={onFinishHandler}
                    initialValues={{ remember: true }}
                    form={form}
                >
                    <Form.Item<FieldType>
                        label="用户名"
                        name="username"
                        rules={[
                            { required: true, message: '请输入你的用户名!' },
                            { type: 'string', min: 5, max: 20, message: '字符长度在5 ~ 20之间!' },
                            { pattern: /^\w+$/, message: '只能是字符数字下划线!' },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item<FieldType>
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item<FieldType>
                        name="remember"
                        valuePropName="checked"
                        wrapperCol={{ offset: 6, span: 16 }}
                    >
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
                        <Space>
                            <Button type="primary" htmlType="submit">
                                登录
                            </Button>
                            <Link to={REGISTER_PATHNAME}>注册新用户</Link>
                        </Space>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default Login
